﻿<script type="text/javascript">
	var Plane = function(){};

	Plane.prototype.fire = function(){
		console.log( '发射普通子弹' );
	}

	var MissileDecorator = function( plane ){
		this.plane = plane;
	}
	MissileDecorator.prototype.fire = function(){
		this.plane.fire();
		console.log( '发射导弹' );
	}
	var AtomDecorator = function( plane ){
		this.plane = plane;
	}
	AtomDecorator.prototype.fire = function(){
		this.plane.fire();
		console.log( '发射原子弹' );
	}

	var plane = new Plane();
	plane = new MissileDecorator( plane );
	plane = new AtomDecorator( plane );
	plane.fire();

	var plane = {
		fire: function(){
			console.log( '发射普通子弹' );
		}
	}
	var missileDecorator = function(){
		console.log( '发射导弹' );
	}
	var atomDecorator = function(){
		console.log( '发射原子弹' );
	}
	var fire1 = plane.fire;
	plane.fire = function(){
		fire1();
		missileDecorator();
	}
	var fire2 = plane.fire;
	plane.fire = function(){
		fire2();
		atomDecorator();
	}
	plane.fire();
	// 分别输出： 发射普通子弹、发射导弹、发射原子弹


	Function.prototype.before = function( beforefn ){
		var __self = this; // 保存原函数的引用
		return function(){ // 返回包含了原函数和新函数的"代理"函数
			beforefn.apply( this, arguments ); // 执行新函数，且保证this 不被劫持，新函数接受的参数
		// 也会被原封不动地传入原函数，新函数在原函数之前执行
			return __self.apply( this, arguments ); // 执行原函数并返回原函数的执行结果，
		// 并且保证this 不被劫持
	}
}

Function.prototype.after = function( afterfn ){
	var __self = this;
	return function(){
		var ret = __self.apply( this, arguments );
		afterfn.apply( this, arguments );
		return ret;
	}
};

</script>


<html>
<button id="button"></button>
<script>
	Function.prototype.before = function( beforefn ){
		var __self = this;
		return function(){
			beforefn.apply( this, arguments );
			return __self.apply( this, arguments );
		}
	}
	document.getElementById = document.getElementById.before(function(){
		alert (1);
	});
	var button = document.getElementById( 'button' );

	console.log( button );

	window.onload = function(){
		alert (1);
	}
	window.onload = ( window.onload || function(){} ).after(function(){
		alert (2);
	}).after(function(){
		alert (3);
	}).after(function(){
		alert (4);
	});


	var before = function( fn, beforefn ){
		return function(){
			beforefn.apply( this, arguments );
			return fn.apply( this, arguments );
		}
	}
	var a = before(
		function(){alert (3)},
		function(){alert (2)}
		);
	a = before( a, function(){alert (1);} );
	a();
</script>
</html>


<html>
<button tag="login" id="button">点击打开登录浮层</button>
<script>
	var showLogin = function(){
		console.log( '打开登录浮层' );
		log( this.getAttribute( 'tag' ) );
	}
	var log = function( tag ){
		console.log( '上报标签为: ' + tag );
// (new Image).src = 'http:// xxx.com/report?tag=' + tag; // 真正的上报代码略
}
document.getElementById( 'button' ).onclick = showLogin;
</script>
</html>


<html>
<button tag="login" id="button">点击打开登录浮层</button>
<script>
	Function.prototype.after = function( afterfn ){
		var __self = this;
		return function(){
			var ret = __self.apply( this, arguments );
			afterfn.apply( this, arguments );
			return ret;
		}
	};
	var showLogin = function(){
		console.log( '打开登录浮层' );
	}
	var log = function(){
		console.log( '上报标签为: ' + this.getAttribute( 'tag' ) );
	}

	showLogin = showLogin.after( log ); // 打开登录浮层之后上报数据
	document.getElementById( 'button' ).onclick = showLogin;
</script>
</html>



<html>
<body>
	用户名：<input id="username" type="text"/>

	密码： <input id="password" type="password"/>
	<input id="submitBtn" type="button" value="提交"></button>
</body>
<script>
	var username = document.getElementById( 'username' ),
	password = document.getElementById( 'password' ),
	submitBtn = document.getElementById( 'submitBtn' );
	var formSubmit = function(){
		if ( username.value === '' ){
			return alert ( '用户名不能为空' );
		}
		if ( password.value === '' ){
			return alert ( '密码不能为空' );
		}
		var param = {
			username: username.value,
			password: password.value
		}
		ajax( 'http:// xxx.com/login', param ); // ajax 具体实现略
	}

	submitBtn.onclick = function(){
		formSubmit();
	}


	var validata = function(){
		if ( username.value === '' ){
			alert ( '用户名不能为空' );
			return false;
		}
		if ( password.value === '' ){
			alert ( '密码不能为空' );
			return false;
		}
	}

	var formSubmit = function(){
		if ( validata() === false ){ // 校验未通过
			return;
		}
		var param = {
			username: username.value,
			password: password.value
		}
		ajax( 'http:// xxx.com/login', param );
	}


	submitBtn.onclick = function(){
		formSubmit();
	}

	Function.prototype.before = function( beforefn ){
		var __self = this;
		return function(){
			if ( beforefn.apply( this, arguments ) === false ){
	// beforefn 返回false 的情况直接return，不再执行后面的原函数
				return;
			}
			return __self.apply( this, arguments );
		}
	}


	var validata = function(){
		if ( username.value === '' ){
			alert ( '用户名不能为空' );
			return false;
		}
		if ( password.value === '' ){
			alert ( '密码不能为空' );
			return false;
		}
	}
	var formSubmit = function(){
		var param = {
			username: username.value,
			password: password.value
		}
		ajax( 'http:// xxx.com/login', param );
	}

	formSubmit = formSubmit.before( validata );

	submitBtn.onclick = function(){
		formSubmit();
	}
	
</script>
</html>